@import '@automattic/typography/styles/variables';
$blueberry-blue: #3858e9;

.chatbox {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.chatbox-toggle {
	padding: 0;
	background-color: transparent;
	z-index: 999;
	transform: translateX( 0 );
	transition: transform 0.5s ease-in-out;
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
	position: fixed;
	right: 248px;
	bottom: 330px;
}

.chatbox-messages {
	overflow-y: auto;
	overflow-x: hidden;
	word-wrap: break-word;
	font-size: medium;
	max-width: 100%;
	line-height: 1.4;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	overscroll-behavior: contain;
	padding-top: 16px;
	gap: 24px;
	box-sizing: border-box;

	.chatbox-loading-chat__spinner {
		display: flex;
		width: 100%;
		justify-content: center;
		padding: 16px 0;

		.components-spinner {
			color: $blueberry-blue;
		}
	}

	.odie-chat__date {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		padding-bottom: 16px;
		color: var( --studio-gray-50 );
		font-size: 0.75rem;
	}
}

.odie-chatbox-message-dislike-feedback {
	min-height: 235px;
	gap: 18px;
	justify-content: flex-start;
}

.chat-box-message-container {
	width: 100%;
	height: 0;
	flex: 1;
	background-color: #fff;
}

.using-environment-badge {
	margin-bottom: 86px;
	height: calc( 100vh - 120px - 86px );
}

.chatbox-header-button {
	color: #ece6f6;
	border: none;
	outline: none;
	padding: 0;
	cursor: pointer;
	background: none;
	font-size: large;
	font-weight: normal;
	text-align: left;
	width: 100%;
}

.odie-chat-message-input-container {
	padding: 16px;
}

.odie-chat-message-input-container.agenttic {
	--radius: 16px;

	.Notice-module_containerWithIcon {
		background-color: #cc18180a;
		border: 1px solid #0000001A;

		svg {
			fill: #8C0B0B;
		}
	}

	.Textarea-module_textarea:focus {
		box-shadow: none;
	}
}
